<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		.box{
			width: 320px;
			height: 480px;
			overflow: hidden;
			background: url(img/game_bg.jpg) 0 0 no-repeat;
			margin: 0 auto;
			margin-top: 50px;
			position: relative;
		}
		.score{
			font-size: 20px;
			color: white;
			margin: 10px 0 0 60px;
		}
		.start,.gameover,.start1{
			width: 320px;
			font-size: 30px;
			color: red;
			text-shadow: 0 0 5px yellow;
			text-align: center;
			margin-top: 170px;
		}
		.gameover,.start1{display: none;}
		.start1{margin-top: 10px;}
		.wolf{
			width: 108px;
			height: 101px;
			position: absolute;
			background: url(img/h0.png);
		}
		.time{
			position: absolute;
			background: url(img/progress.png) 0 0 no-repeat;
			width: 180px;
			height:16px;
			left: 63px;
			top: 66px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="score">0</div>
		<div class="time"></div>
		<div class="start">开始</div>
		<div class="gameover">Game Over!</div>
		<div class="start1">重新开始</div>
	</div>
</body>
<script type="text/javascript">
	for (var i = 0; i < 15; i++) {
		document.createElement("img").src = "img/h"+i+".png";
	}
	// 每隔1秒在随机的位置出现一只狼，狼还分为小灰灰和灰太狼，最多同时可以看到2只狼，位置不会重叠。有出现、消失的动画
	// 点击狼，狼会出现打晕的动画，并根据狼的类型来加分和减分。
	var zuoBiao = [["115px", "98px"],["160px", "17px"],["220px", "15px"],["293px", "30px"],["273px", "120px"],["295px", "207px"],["211px", "200px"],["141px", "187px"],["190px", "100px"]];

	// 1、写背景图
	// 2、点击开始开始游戏（开始的按钮）
	var gameover=document.getElementsByClassName("gameover")[0];
	var start1=document.getElementsByClassName("start1")[0];
	var start = document.getElementsByClassName("start")[0];
	var score = document.getElementsByClassName("score")[0];
	var box = document.getElementsByClassName("box")[0];
	var times=document.getElementsByClassName("time")[0];
	function ks(){
		start.style.display = "none";
		var createWolfTimer = setInterval(function(){
			// 3、在固定（第一个）的位置出现一只狼
			var wolf = document.createElement("div");
			wolf.className = "wolf";

			// 7、随机狼的位置。（不能重复）
			var num = parseInt((Math.random()*zuoBiao.length));
			var arr = zuoBiao.splice(num, 1);
			wolf.style.top = arr[0][0];
			wolf.style.left = arr[0][1];
			box.appendChild(wolf);

			// 6、给狼添加类型。根据类型不同来加分或减分。
			var type = Math.random()*10 > 7 ? "x" : "h";
			wolf.style.backgroundImage = "url('img/" + type + "0.png')";

			// 5、添加点击事件，点击之后狼会被打晕，+10分
			wolf.onclick = function(){
				clearInterval(upTimer);
				var count = 11;
				var hitTimer = setInterval(function(){
					wolf.style.backgroundImage = "url('img/" + type + count + ".png')";
					count++;
					if (count >= 15) {
						clearInterval(hitTimer);
						wolf.remove();
						zuoBiao.push(arr[0]);
					}
				},100)
				if (type=="h") {
					score.innerHTML=parseInt(score.innerHTML)+10;
				} else {
					score.innerHTML=parseInt(score.innerHTML)-10;
				}
			}

			// 4、添加上升和下降的动画（1s）
			var count = 1;
			var upTimer = setInterval(function(){
				wolf.style.backgroundImage = "url('img/" + type + count + ".png')";
				count++;
				if (count == 11) {
					clearInterval(upTimer);
					wolf.remove();
					zuoBiao.push(arr[0]);
				}
			},100);
		},700);
		// 倒计时
		var time=times.offsetWidth;
		var timer = setInterval((function(){
			time--;
			times.style.width=time +"px";
			if (times.style.width=="0px") {
				gameover.style.display = "block";
				start1.style.display = "block";
				clearInterval(createWolfTimer);
				clearInterval(timer);
			}
		}),10)

	}
	start.onclick=function(){
		times.style.width="180px";
		ks();
	}
	start1.onclick=function(){
		times.style.width="180px";
		gameover.style.display = "none";
		start1.style.display = "none";
		score.innerHTML=0;
		ks();
	}
</script>
</html>